 <template>
  <div>
    <el-dialog
      title="自定义事件"
      :model-value="dialogVisible"
      width="1000px"
      :before-close="handleClose"
    >
      <div>
        <el-button type="primary" @click="event = true">添加事件</el-button>
        <!-- <el-button type="primary" @click="$store.commit('event/clearEvent',[])"
          >清理事件</el-button
        > -->
      </div>
      <div class="_content">
        <el-card shadow="hover" v-for="(item, idx) in dataList" :key="idx">
          <!-- 删除 -->
          <span v-show="idx !== 0" class="el-icon-close" @click="delEvent(idx)">

          </span>
          <div class="_icon">
            <span :class="item.icon"></span>
          </div>
          <div>
            <span>名字：</span>
            <span>{{ item.name }}</span>
          </div>
          <div>
            <span>事件名称：</span>
            <span>{{ item.name }}</span>
          </div>
          <div>
            <span>事件分类：</span>
            <span>{{ item.typeName }}</span>
          </div>
          <div>
            <span>类型：</span>
            <span>{{ item.propertyTypeName }}</span>
          </div>
          <el-button class="_editor" type="text" @click="toEditor(item, idx)">编辑</el-button>
        </el-card>
      </div>
      <!-- <LayoutTable
        ref="customerGroupRef"
        :dataList="dataList"
        disable-auto-height
        :row-class-name="rowClassName"
        :show-pager="false"
      >
        <el-table-column
          prop="name"
          label="事件名称"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="toEditor(scope.row)">编辑</el-button>
            <el-button type="text" @click="delEvent(scope.row.index)">删除</el-button>
          </template>
        </el-table-column>
      </LayoutTable> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
    <div v-if="event">
      <add-event
        :id="id"
        :data="currentDialogData"
        @cancel="handleCancel('event')"
        @confirm="handleEventCreate"
      ></add-event>
    </div>
  </div>
</template>
 <script>
// import EventDialog from "@/components/marketingCanvas/Event";
import EventApi from "@/api/eventApi";
import AddEvent from "./AddEvent.vue";
export default {
  props: {
    eventsData: {
      require: false,
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    AddEvent,
  },
  data() {
    return {
      event: false,
      dialogVisible: true,
      id: null,
      typeList: [],
      currentDialogData: {
        name: "",
        typeId: "",
        icon: "el-icon-tickets",
        event: "event",
        propertyKey: "",
        showInCanvas: 0,
        propertyType: "",
      },
      dataList: [],
    };
  },
  created() {
    this.getSimpleList();
    console.log("[ this.eventsData ] >", this.eventsData);
    // this.onSearch()
    this.dataList = JSON.parse(JSON.stringify(this.eventsData))
  },
  methods: {
    rowClassName(row, index) {
      row.index = index;
    },
    handleClose() {
      this.$emit("cancel");
    },
    // submit() {
    //   this.$emit("confirm", this.dataList);
    // },
    // onSearch() {
    //   this.$nextTick(() => {
    //     this.$refs.customerGroupRef.search();
    //   });
    // },

    delEvent(index) {
      this.dataList.splice(index, 1);
      this.$emit('delEvent', index)
      // this.updateNode();
      this.$message.success("删除成功");
      // this.onSearch();
    },
    toEditor(row, idx) {
      this.id = idx
      this.event = true;
      this.currentDialogData = JSON.parse(JSON.stringify(row));
    },
    handleCancel() {
      this.event = false;
    },

    updateNode(node) {
      this.$emit("updateNode", node);
    },
    editNode(node, index) {
      this.$emit("editNode", node, index);
    },
    handleEventCreate(val) {
      let node = JSON.parse(JSON.stringify(val))
      this.reset()
      if(this.id || this.id == 0) {
        this.dataList[this.id] = node
        this.editNode(node, this.id);
        this.id = null
      } else {
        this.dataList.push(node);
        this.updateNode(node);
      }
      // this.onSearch();
    },
    reset() {
      this.currentDialogData = {
        name: "",
        typeId: "",
        icon: "el-icon-tickets",
        event: "event",
        propertyKey: "",
        showInCanvas: 0,
        propertyType: "",
      }
    },
    async getSimpleList() {
      let rs = await EventApi.getSimpleList();
      if (rs.code === 200) {
        console.log("[ 事件分类-list ] >", rs.payload);
        this.typeList = rs.payload;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
._content {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .el-card {
    position: relative;
    width: 200px;
    height: 180px;
    margin: 10px 10px;
    padding-bottom: 10px;
    text-align: center;
    ._icon {
      display: inline-block;
      width: 50px;
      height: 50px;
      span {
        font-size: 50px;
      }
    }
    .el-icon-close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 15px;
      display: none;
      cursor: pointer;

    }
    :hover .el-icon-close, :hover ._editor{
      display: inline-block;
    }
    ._editor {
      position: absolute;
      left: 10px;
      bottom: 5px;
      display: none;
    }
  }
}
</style>
